<template>
	<view>
		<view class="kaihutalis">
			<view style="width: 40%; height: 100%; float: left; background:#08377D ;"></view>
			<view style="position: absolute; text-align: center;left: 0; top: 0; color: #fff; width: 100%;">开户进度40%
			</view>
		</view>

		<view class="listtab">
			<view>
				<view style="float: left; width: 50%; font-size: 32rpx; font-weight: 600;">1.您的主要收入来源是:(单选)</view>

			</view>
			<view class="listtab_name">
			
			
				  <view class="list">
				   <view class="listurl" v-for="(item, index) in list" :key="index" @click="selectItem(index)" :class="[item.isSelected ? 'selected-style' : '']">
				         {{ item.text }}
				       </view>
				  </view>
				
			</view>
			<view>
				<view style="float: left; width: 100%; font-size: 32rpx; font-weight: 600; margin-top: 20rpx;">
					2.最近您家庭预计进行证券投资的资金占家庭现 有总资产(不含自住、自用房产及汽车等固定资 产)的比例是:(单选)</view>

			</view>
			<view class="listtab_name">
				<view class="list">
				 <view class="listurl" v-for="(item, index) in lista" :key="index" @click="selectItema(index)" :class="[item.isSelected ? 'selected-style' : '']">
				       {{ item.text }}
				     </view>
				</view>
			</view>

		</view>



	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgree: "", // 默认未勾选
				list: [{
						text: '工资、劳务报酬*',
						isSelected: false
					},
					{
						text: '生产经营所得',
						isSelected: false
					},
					{
						text: '利息、股息、转让证券等金融性资产收入',
						isSelected: false
					},
					{
						text: '出租、出售房地产等非金融性资产收入',
						isSelected: false
					},
					{
						text: '无固定收入',
						isSelected: false
					},

					// ...更多选项
				],
				lista: [{
						text: '70%以以上',
						isSelected: false
					},
					{
						text: '50%-70%',
						isSelected: false
					},
					{
						text: '30%-50%',
						isSelected: false
					},
					{
						text: '10%-30%',
						isSelected: false
					},
					{
						text: '10%以下',
						isSelected: false
					},
				
					// ...更多选项
				]
			};
		},
		methods: {
			fanhui() {
				uni.navigateTo({
					url: './pinggu'
				})
			},
			selectItem(index) {
			      this.list.forEach((item, i) => {
			        if (i === index) {
			          item.isSelected = true;
			        } else {
			          item.isSelected = false;
			        }
			      });
			    },
			selectItema(index) {
			      this.lista.forEach((item, i) => {
			        if (i === index) {
			          item.isSelected = true;
			        } else {
			          item.isSelected = false;
			        }
			      });
			    },	
			toggleAgree(event) {

				this.isAgree = event.detail.value;
			},
			onSubmit(event) {
				event.preventDefault();
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意用户协议与隐私政策',
						icon: 'none'
					});
					return;
				}
				// 登录逻辑
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style>
	.item-class{
		color: #999;
	}
	.selected-style {
		/* 选中时的样式 */

		color: red;
		/* 选中文字颜色 */
	}

	.kaihutalis {
		width: 100%;
		height: 40rpx;
		float: left;
		background: #D6E1F1;
		position: relative;
	}

	.btn_yjz {
		width: 100%;
		height: 76rpx;
		float: left;
	}

	.yjzsc {
		width: 40%;
		height: 76rpx;
		float: left;
		margin-left: 5%;
		line-height: 76rpx;
		font-size: 24rpx;
		color: #262626;
	}

	.btsc {
		width: 166rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #08377D;
		float: right;
		margin-right: 33rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #08377D;
		text-align: center;
		line-height: 48rpx;
	}


	.xybta {
		width: 100%;
		height: 92rpx;
		float: left;
		background: #08377D;
		color: #fff;
		text-align: center;
		line-height: 92rpx;
		margin-top: 72rpx;
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 10rpx;
	}

	.listtab {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
		margin-top: 20rpx;
	}

	.listtab_name {
		width: 684rpx;
		height: 544rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8, 55, 125, 0.1);
		border-radius: 12rpx;
		float: left;
		margin-top: 30rpx;
	}

	.listtab_namea {
		width: 684rpx;
		height: 262rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8, 55, 125, 0.1);
		border-radius: 12rpx;
		float: left;
		margin-top: 80rpx;
	}
</style>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F6F4F9;
	}

	.container {
		float: left;
		width: 100%;
		margin-top: 100rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-bottom: 20px;

		checkbox {
			margin-right: 10px;
		}

		text {
			font-size: 14px;
			color: #666;
		}
	}

	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		margin: 33rpx auto;
		position: relative;
		z-index: 1;

		.avatar-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.avatar-icon {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 2;
			background: url('../../static/user/mysetting/edit-icon.png');
			background-position: center center;
			background-size: 100% 100%;
		}
	}

	.lista {
		width: 100%;
		padding: 0 33rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;

		.listurl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 93rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

	}

	.list {
		width: 100%;
		padding: 0 33rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;

		.listurl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 93rpx;
			border-bottom: 1rpx solid #E5E5E5;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.listurla {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 93rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.listurlb {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 170rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>